<!-- 分类管理页面 -->
<style>
	.modal-title{
		font-size: 25px;
	}
	.modal-select{
		width: 150px;
		height: 30px;
	}
</style>
<div class="user_container">
	<div class="row">
		<div class="col-md-1">
			<button class="btn btn-default" type="submit" data-toggle="modal" data-target="#exampleModal">新增</button>
		</div>
		
	</div>
	<div class="row">
		<table class="table table-hover">
		   <thead>
			   <th>序号</th>
			   <th>名称</th>
			   <th>排序号</th>
			   <th>父栏目</th>
			   <th>描述</th>
			   
			   <th>操作</th>
		   </thead>
		   <tbody>
			   <tr>
				   <!-- <td>1</td>
				   <td>usernaem</td>
				   <td>name</td>
				   <td>role</td>
				   
				   <td>18777772222</td>
				   <td>
					
				   </td> -->
			   </tr>
			   
		   </tbody>
	  </table>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLabel">新增栏目</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
		  <form>
			<div class="form-group">
			  <label for="recipient-name" class="col-form-label" >栏目名称</label>
			  <input type="text" class="form-control modal-input" id="recipient-name">
			</div>
			<div class="form-group">
			  <label for="recipient-name" class="col-form-label">父栏目</label>
			  <select class="modal-select">
				<option  class="val" disabled selected hidden>请选择父栏目</option>
				<option>校园新闻</option>
				<option>通知公告</option>
				<option>学术活动</option>
				<option>媒体聚焦</option>
				<option>学院快讯</option>
			  </select>
			  <!-- <input type="text" class="form-control modal-input" id="recipient-name"> -->
			</div>
			<div class="form-group">
			  <label for="recipient-name" class="col-form-label">序号</label>
			  <input type="text" class="form-control modal-input" id="recipient-name">
			</div>
  
			<div class="form-group">
			  <label for="recipient-name" class="col-form-label">栏目介绍</label>
			  <input type="text" class="form-control modal-input" id="recipient-name111">
			</div>
			
		  </form>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		  <button type="button" class="btn btn-primary">保存</button>
		</div>
	  </div>
	</div>
  </div>

<script>
	var id="";

	//发送请求获取信息
	function getData(){
		$.ajax({
		url:"http://182.92.164.74:8002/category/findAll",
		type:"GET",
		headers:{
			"Authorization":sessionStorage.getItem("token")
		},
		success:function(data){
			//将信息插入到表格中
			var user=data.data;
			
			user.forEach((item)=>{
				$("tbody").append(`
				  <tr>
						<td>`+item.id+`</td>
						<td>`+item.name+`</td>	
						<td>`+item.no+`</td>			  
						<td>`+item.parentId+`</td>			  
						<td>`+item.description+`</td>			  
						
						
						<td>
						     <span class="edit">编辑</span>
						     <span class="delete">删除</span>
						</td>
				  </tr>
				
				
				`)
			})
		}
	})
	}
	getData()
   //给新增按钮绑定事件
   $(".btn-default").click(()=>{
   		$(".modal-input").val("")
		$(".modal-select").val("")
  //  $("#inlineRadio2:checked").attr("checked",false)
 })
	//给保存按钮绑定事件
	$(".btn-primary").click((event)=>{
			
			
			//获取模态框中的数据
			
			var parentId=$(".modal-select").val()
			var name=$(".modal-input").eq(0).val()
			var no=$(".modal-input").eq(1).val()
			var description=$(".modal-input").eq(2).val()
			
			//判断id是否为空  从而判断是添加还是修改
			if(id==""){
				url="http://182.92.164.74:8002/category/saveOrUpdate?name="+name+"&parent="+parentId+"&no="+no+"&description="+description
			}else {
				url="http://182.92.164.74:8002/category/saveOrUpdate?name="+name+"&parent="+parentId+"&no="+no+"&description="+description+"&id="+id
			}
			//发送请求添加数据
			$.ajax({
			url:url,
			type:"POST",
			headers:{
				"Authorization":sessionStorage.getItem("token")
			},
			success:function(data){
					//关闭模态框 刷新页面
					
					$("#exampleModal").modal("hide")
					// console.log(1)
					$("tbody").empty()

					getData()     

			}

			})   
})

//给编辑按钮添加事件
$("tbody").on("click",".edit",function(event){
	
   //获取当前行数据
   
  $("#exampleModal").modal("show")  
   
        id=$(event.currentTarget).parents("tr").children().eq(0).text()
		var name=$(event.currentTarget).parents("tr").children().eq(1).text()
		var parent=$(event.currentTarget).parents("tr").children().eq(3).text()
		
		var no=$(event.currentTarget).parents("tr").children().eq(2).text()
		var description=$(event.currentTarget).parents("tr").children().eq(4).text()
        
		//将数据放到模态框中
		$("#exampleModal input").eq(0).val(name)
		$("#exampleModal input").eq(1).val(no)
		$("#exampleModal input").eq(2).val(description)
		$(".modal-select").val(parent)
 })

//给删除按钮绑定事件
$("tbody").on("click",".delete",function(){

                        var id=$(event.target).parents("tr").children().eq(0).text()
						// console.log(id)

                        $.ajax({
                          url:"http://182.92.164.74:8002/category/deleteById?id="+id,
                          type:"GET",
                          headers:{
                            "Authorization":sessionStorage.getItem("token")
                          },
                          success:function(data){

                            // console.log(data)
                              alert("删除成功")
                              //刷新页面  清空页面
                              $("tbody").empty()
                              getData()
                          }
                        })
                  })

  
</script>